<template>
  <view class="page-container">
    <!-- 维修信息 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">维修信息</text>
      </view>
      <view class="section-content">
        <view class="info-row">
          <text class="label">维修单号：</text>
          <text class="value">{{ task.orderNumber }}</text>
        </view>
        <view class="info-row">
          <text class="label">维修方式：</text>
          <text class="value">{{ repairMethodLabels[task.repairMethod] }}</text>
        </view>
        <view class="info-row">
          <text class="label">取车位置：</text>
          <view class="location-container">
            <text class="value">{{ task.pickupLocation }}</text>
            <uni-icons type="location" size="24" color="#007AFF" @click="navigateToLocation(task.pickupLocation)" />
          </view>
        </view>
        <view class="info-row">
          <text class="label">预约日期：</text>
          <text class="value">{{ formatTime(task.appointmentDate) }}</text>
        </view>
        <view class="info-row">
          <text class="label">提交日期：</text>
          <text class="value">{{ formatTime(task.submissionDate) }}</text>
        </view>
      </view>
    </view>

    <!-- 车辆信息 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">车辆信息</text>
      </view>
      <view class="section-content">
        <view class="info-row">
          <text class="label">车辆类型：</text>
          <text class="value">{{ task.vehicleId }}</text>
        </view>
        <view class="info-row">
          <text class="label">维修部件图片：</text>
		  <image 
		                class="image" 
		                v-for="(image, index) in images" 
		                :key="index" 
		                :src="image.imageUrl" 
		                mode="aspectFill" 
		              />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { getToken } from '@/utils/auth';
import { onLoad } from '@dcloudio/uni-app';

const task = ref({
  orderNumber: '',
  repairMethod: 1,
  pickupLocation: '',
  appointmentDate: '',
  submissionDate: '',
  vehicleId: '',
  imageId: ''
}); // 维修任务详情

const images = ref([]); // 图片列表
const repairId = ref(null); // 维修任务 ID
const repairMethodLabels = ref(['到店维修', '上门取车']); // 维修方式标签

// 格式化时间
const formatTime = (time) => {
  if (!time) return '-';
  const date = new Date(time);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// 获取图片 URL
const getImageUrl = (imageId) => {
  return `http://localhost:8866/sn/images/${imageId}`;
};

// 加载维修任务详情
const loadRepairDetail = () => {
  const token = getToken();
  uni.request({
    url: `http://localhost:8866/sn/repairRecords/getRepairRecordsDetails/${repairId.value}`,
    method: 'GET',
    header: { 'Authorization': token },
    success: (response) => {
      if (response.data.code === 200) {
        task.value = response.data.data;
        if (task.value.imageId) {
          loadImages(task.value.imageId);  // 获取图片
        }
      } else {
        uni.showToast({ title: response.data.msg, icon: 'none' });
      }
    },
    fail: () => {
      uni.showToast({ title: '加载失败，请重试', icon: 'none' });
    }
  });
};

// 加载图片信息
const loadImages = (imageId) => {
  const token = getToken();
  uni.request({
    url: `http://localhost:8866/sn/images/getImages/${imageId}`,
    method: 'GET',
    header: { 'Authorization': token },
    success: (response) => {
      if (response.data.code === 200) {
        images.value = response.data.data || [];
        console.log(response.data.data);
      } else {
        uni.showToast({ title: response.data.msg, icon: 'none' });
      }
    },
    fail: () => {
      uni.showToast({ title: '图片加载失败', icon: 'none' });
    }
  });
};

// 页面加载时获取参数
onLoad((options) => {
  console.log(options);
  repairId.value = options.repairId;
  console.log(repairId.value);
  loadRepairDetail(); 
});
</script>

<style lang="scss" scoped>
.page-container {
  background: #f8f9fa;
  min-height: 100vh;
  padding: 24rpx;
}

/* 信息块样式 */
.section {
  background: #fff;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  margin-bottom: 16rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.section-content {
  .info-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 16rpx;
    font-size: 28rpx;
    color: #333;
    
    .label {
      color: #666;
      min-width: 140rpx;
      margin-right: 80rpx;  /* 保证标签和内容之间有间距 */
      text-align: left;
    }

    .value {
      color: #333;
      text-align: left;  /* 确保内容左对齐 */
      flex: 1;  /* 确保内容占据剩余空间 */
    }

    .phone-container,
    .location-container {
      display: flex;
      align-items: center;
      gap: 8rpx;
    }

    .image {
      width: 200rpx;
      height: 200rpx;
      margin-top: 8rpx;
    }
  }
}
</style>
